<template>
  <div class="scorelist zanwei-top">
    <head-nav :isBack="isBack"></head-nav>
    <div class="newlist">
      <div class="newlist-title">
        <div :class="{active: i == lanmuindex}"
             v-for="(child,i) in lanmu"
             :style="{
             color:i === lanmuindex?primaryColor:'',
             borderColor:i === lanmuindex?primaryColor:''
             }"
             @click="checkFn(i,child.type)">{{child.title}}</div>
      </div>
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" infinite-scroll-immediate-check="false">
        <!-- <li v-for="(item,index) in rows" :key="index">

          <div class="liinnwer" @click="goDetailFn(item.ID)">
            <div class=" image">
              <div id="marktip">
                <div id="marktipcontent">仅限会员</div>
              </div>
              <img :src="item.TP[0]" alt="">
            </div>
            <div class=" text">
              <div class="textContent">
                <h3 class="bt">{{item.SPMC}}</h3>
                <div class="sjbox">
                  <p class="rdl">{{item.JF}}积分</p>
                  <p class="sj">数量剩余：{{item.KC}}</p>
                </div>
              </div>
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>

        </li> -->
        <!-- {{rows}} -->
        <li v-for="(item,index) in rows" :key="index">
          <!-- <router-link class="rap_rout" :to="{path:'/faddishdetail'}" tag="div"> -->
          <div class="rap_rout" @click="goDetailFn(item.ID)">
            <div class="list_l">
              <div class="rap_ph">
                <img :src="item.TP1[0]" />
              </div>
              <div class="rap_cont">
                <div class="tit">{{item.SPMC}}</div>
                <div class="price">
                  <span :style="textColor">¥{{item.JG}}</span>
                  <span v-if="item.JE && item.JE!=item.JG">原价:¥{{item.JE}}</span>
                </div>
                <span :style="textColor">(剩余 {{item.surplus}})</span>
								<!-- <div class="ms" v-html="item.MSTEXT"></div> -->
								<!--<p class="ms2" v-if="item.XGCS > 0">数量限制{{item.XGCS}}，{{item.XJ}}元抢购</p>
                <p class="ms2" v-else>{{item.XJ}}元抢购</p>-->
              </div>
            </div>
            <div class="rap_xqbtn" :style="backgroundColor">立即抢购</div>
            <!-- </router-link> -->
          </div>
        </li>
        
      </ul>
      <div class="list-loading" v-if="loading">
        <i class="iconfont icon-loading"></i> 加载中...
      </div>
      <div v-else>
        <div v-if="forbid" class="forbid">
          没有更多了...
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/api/api'
  import {
    Toast
  } from 'mint-ui';

  export default {
    data() {
      return {
        isBack:false,
        loading: true,
        num: 1,
        numSize: 8,
        rows: [],
        forbid: false,
        lanmu: [
          {
            title:'时尚爆款',
            type:1
          },
          // {
          //   title:'品牌代金券',
          //   type:2
          // },
          // {
          //   title:'1元秒杀',
          //   type:3
          // }
        ],
        lanmuindex: 0,
        type: 1 // 1：时尚爆款 2：品牌代金券 3：1元秒杀
      };
    },
    methods: {
      goDetailFn(id) {
        let page = this;
        var userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
        if (userinfo&&userinfo.vipcode) {
          if (!this.$util.checkValidity()) {
            return
          }
          page.$router.push('/burstingarticle/' + id);
        	// 检查过期
        	// api.scoreToGiftDetail(page, id, cb);
	        // function cb(res) {
	        //   if	(res.code === 0) {
	        //   	// 存状态
	        //   	let idx = page.lanmuindex;
	        //   	let lmIndex = {};
	        //   	lmIndex.index = idx;
	        //   	lmIndex = JSON.stringify(lmIndex);
	        //   	sessionStorage.setItem('lmIndex',lmIndex);
	           	
	        //   } else {
	        //   	Toast({
		      //       message: res.msg,
		      //       duration: 2000
		      //     });
		      //     setTimeout(function () {
		      //     	page.rows = [];
			    //       // 刷新页面
	        //     	// new Promise((resolve, reject) => {
					//       //   api.getLiftType(page, cb)
					
					//       //   function cb(res) {
					//       //     if (res.code == 0) {
					//       //       let data = JSON.parse(res.data)
					//       //       console.log(data)
					//       //       // page.lanmu = data
					//       //       page.type = data[0].ID
					//       //       resolve(0)
					//       //     } else {
					//       //       Toast({
					//       //         message: res.msg,
					//       //         duration: 3000
					//       //       });
					//       //     }
					//       //   }
					//       // }).then(result => {
					        
          //       // })
          //       page.getListDataFn(page.type, page.numSize, page.num);
				  //     },1000);
	           
	        //   }
	          
	        // }
        } else {
          Toast({
            message: '您还不是会员，快去注册吧！',
            duration: 2000
          });
          setTimeout(function () {
//          page.$router.push('/register')
						page.$router.push({path: "/register",query: {type: 'score'}});
          }, 2000)
        }
      },
      loadMore() {
        this.num++
          if (this.forbid) {
            return false
          }
        this.loading = true;

        this.getListDataFn(this.type, this.numSize, this.num);
        console.log(this.num)
        // this.loading = false;
      },
      getListDataFn(type, row, num) {
        let page = this
        api.getExplosiveList(page, type, row, num, cb)
        function cb(res) {
          let data = res.data
          if (data.code == 0) {
            console.log(data.data)
            if (data.data.length !== 0) {
              let rows = data.data
              rows.map(y => {
                let TP = y.TP.map(x => {
                  return page.host.filehost + x.ID
                })
                y.TP1 = TP
                return y
              })
              page.rows = page.rows.concat(rows)

            } else {
              page.forbid = true
            }

          } else {
            Toast({
              message: res.msg,
              duration: 3000
            });
          }
          setTimeout(function () {
            page.loading = false;
          }, 1000)
        }
      },
      checkFn(i, type) {
        this.lanmuindex = i
        this.type = type
        this.num = 1
        this.rows = []
        this.loading = true
        this.forbid = false;
        this.getListDataFn(this.type, this.numSize, this.num);
      },
    },
    mounted() {
      let page = this;
			// 返回状态
			let selStatus = JSON.parse(sessionStorage.getItem('lmIndex'));
			if (selStatus) {
				if (selStatus.index !== undefined) {
					// console.log(typeof selStatus.index,selStatus.index)
					this.lanmuindex = selStatus.index;
				}
			}
      // new Promise((resolve, reject) => {
      //   api.getLiftType(page, cb)
      //   function cb(res) {
      //     if (res.code == 0) {
      //       let data = JSON.parse(res.data)
      //       console.log(data)
      //       page.type = data[page.lanmuindex].ID
      //       resolve(0)
      //     } else {
      //       Toast({
      //         message: res.msg,
      //         duration: 3000
      //       });
      //     }
      //   }
        
      // }).then(result => {
        
      // })
      page.getListDataFn(page.type, page.numSize, page.num);
      

    }
  };

</script>

<style lang="less" scoped>
  @import '../../assets/css/mixins.less';
  .forbid {
    padding: 0.2rem;
    text-align: center;
  }

  .scorelist {
    .newlist {
      @tithei: 0.86rem;
      padding-top: @tithei;
      .newlist-title {
        position: fixed;
        left: 0;
        top: 48px;
        height: @tithei;
        width: 100vw;
        /*width: 100%;*/
        background: #f6f6f6;
        z-index: 99;
        display: flex;
        /*overflow: initial;*/
       	overflow-y: scroll;
       	/*flex-wrap: nowrap;*/
       	/*overflow-x: scroll;*/
        .borderBotttomOne(#d4d4d4);
        div {
         	min-width: 33.2%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.28rem;
          font-weight: bold;
          &.active {
            color: #F05DC4;
            border-bottom: #F05DC4 solid 0.04rem;
            width: 100%;
          }
        }
      }
      ul {
        // li {
        //   position: relative;
        //   list-style: none;
        //   .liinnwer {
        //     display: flex;
        //     padding: 0.2rem 0.2rem 0 0.2rem;
        //     .image {
        //       width: 1.7rem;
        //       height: 1.5rem;
        //       /* overflow: hidden; */
        //       border: #d4d4d4 solid 1px;
        //       position: relative;
        //       img {
        //         width: 100%;
        //         height: 100%;
        //       }
        //     }
        //     .text {
        //       &::before {
        //         content: "";
        //         position: absolute;
        //         z-index: 2;
        //         bottom: 0;
        //         left: 0px;
        //         width: 100%;
        //         height: 1px;
        //         border-bottom: 1px solid #d4d4d4;
        //         transform: scaleY(0.5);
        //         transform-origin: 0 100%;
        //       }
        //       position: relative;
        //       margin-left: 0.2rem;
        //       flex: 1;
        //       display: flex;
        //       .textContent {
        //         flex: 1;
        //         display: flex;
        //         flex-direction: column;
        //         justify-content: flex-start;
        //       }
        //       i {
        //         margin-left: 0.2rem;
        //         font-size: 0.24rem;
        //         position: absolute;
        //         right: 0.16rem;
        //         top: 0.30rem;
        //       }
        //       .bt {
        //         font-size: 0.28rem;
        //         font-weight: bold;
        //         color: #000000;
        //         text-align: justify;
        //       }
        //       .ms {
        //         font-size: 0.24rem;
        //         color: #999999;
        //       }
        //       .sjbox {
        //         display: flex;
        //         justify-content: space-between;
        //         padding-top: 0.4rem;
        //         color: #999999;
        //         font-size: 0.28rem;
        //         .sj {
        //           color: #F05DC4;
        //           margin-right: 0.3rem;
        //         }
        //         .rdl {
        //           color: #50cbf5;
        //         }
        //       }
        //     }
        //   }
        // }
        li {
          padding: 0.2rem 0 0.1rem 0;
          border-bottom: 0.01rem solid #e2e2e2;
          .rap_rout {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .list_l {
            display: flex;
          }
          .rap_ph {
            border-radius: 0.06rem;
            margin: 0 0.15rem 0 0.1rem;
            img {
              width: 1.48rem;
              height: 1.48rem;
              border-radius: 0.06rem;
            }
          }
          .rap_cont {
            width: 4.1rem;
            div {
              color: #333;
            }
            span {
              font-size: 0.28rem;
              color: #F05DC4;
              line-height: 0.36rem;
              margin-top: 0.12rem;
              display: block;
            }
            p {
              font-size: 0.28rem;
              color: #bdbdbd;
              line-height: 0.36rem;
            }
            .tit {
              font-size: 0.3rem;
              font-weight: bold;
              line-height: 0.46rem;
            }
            .ms {
              font-size: 0.28rem;
              line-height: 0.36rem;
              margin-top: 0.12rem;
              width: 4.1rem;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              & > * {
                padding: 0 !important;
                margin: 0 !important;
                font-size: 0.28rem !important;
                color: #bdbdbd !important;
                line-height: 0.36rem !important;
              }
            }
            .ms2 {
              margin-top: 0.12rem;            
            }
            .price {
              display: flex;
              justify-content: space-between;
              span {
                &:nth-child(2) {
                  text-decoration: line-through;
                  color: #999999;
                  margin-right: 0.4rem;
                }
              }
            }
          }
          .rap_xqbtn {
            width: 1.42rem;
            height: 0.4rem;
            color: #fff;
            font-size: 0.24rem;
            text-align: center;
            line-height: 0.4rem;
            background-color: #F05DC4;
            border-radius: 0.1rem;
            margin-right: 0.2rem;
          }
        }

      }
    }

  }

  #marktip {
    width: 102%;
    height: 102%;
    background: transparent;
    overflow: hidden;
    position: absolute;
    left: -2%;
    top: -2%;
  }

  #marktipcontent {
    width: 1.2rem;
    height: 0.28rem;
    line-height: 0.28rem;
    background: #F05DC4;
    transform: rotate(-45deg) translate(-28%, -35%);
    font-size: 0.16rem;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;

  }

</style>
